<template>
  <div class="content" id="allmap">
    <div class="w_full h_30">
      <el-date-picker
        v-model="time"
        type="date"
        value-format="yyyy-MM-dd"
        placeholder="选择日期"
        @change="changeTime">
      </el-date-picker>
    </div>

    <div class="w_full h_full-50 mt_20">
      <baidu-map class="map" :center="map.center" :zoom="map.zoom" @ready="initMap">
        <!--缩放-->
        <bm-navigation anchor="BMAP_ANCHOR_TOP_LEFT"></bm-navigation>
        
        <!--定位-->
        <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>

        <!-- 描边 -->
        <bm-boundary name="呼伦贝尔市鄂温克族自治旗" :strokeWeight="2" strokeColor="blue" :fillOpacity="0.1" />

        <!-- 折线 -->
        <bm-polyline :path="polyLinePath" :strokeWeight="4" strokeColor="green" strokeStyle="dashed" />

        <!--点-->
        <bm-marker :position="map.center" :draggable="false" animation="BMAP_ANIMATION_DROP" />

        <!-- 起点 -->
        <!-- <bm-marker :position="polyLinePath[0]" :icon="startIcon" :draggable="false" animation="BMAP_ANIMATION_DROP" /> -->
      </baidu-map>
    </div>
    
  </div>
</template>

<script>
  import '../../assets/js/BMapGLLib.js'

  export default {
    name: "demo",
    data: () => ({
      time: null,
      map: {
        center: { lng: 119.740230, lat: 49.024068 },
        zoom: 17,
        show: true,
        dragging: true,
        // 起点图标配置
        startIcon: {
          url: 'https://api.map.baidu.com/img/markers.png', // 百度地图默认标记图标
          size: { width: 23, height: 32 },
          opts: {
            imageOffset: { width: 0, height: 0 } // 图标偏移，默认图标中起点图标在(0,0)位置
          }
        },
      },
      polyLinePath: []
    }),
    mounted() {
      this.time = this.getCurentTime()
    },
    methods: {
      initMap({ BMap, map }) {
        // 鼠标缩放
        map.enableScrollWheelZoom(true);

        map.centerAndZoom(new BMap.Point(119.740230, 49.024068), 17);

        let path = [
          { lng: 119.741161, lat: 49.024210 },
          { lng: 119.740230, lat: 49.024068 },
          { lng: 119.739206, lat: 49.023761 },
          { lng: 119.740292, lat: 49.023435 },
          { lng: 119.739982, lat: 49.022313 },
          { lng: 119.737220, lat: 49.022741 },
          { lng: 119.739434, lat: 49.024189 },
          { lng: 119.739560, lat: 49.024521 },
          { lng: 119.732528, lat: 49.024880 },
          { lng: 119.733463, lat: 49.025253 },
          { lng: 119.732675, lat: 49.025903 },
          { lng: 119.733978, lat: 49.025799 },
          { lng: 119.731929, lat: 49.026435 },
          { lng: 119.734578, lat: 49.026760 },
          { lng: 119.737762, lat: 49.026428 },
          { lng: 119.738341, lat: 49.025357 },
          { lng: 119.739928, lat: 49.025716 },
          { lng: 119.741161, lat: 49.024210 },
        ];

        this.initPolyLine(path)

        // for (let i = 0; i < path.length; i += 2) {
        //   var walking = new BMap.WalkingRoute(map, {
        //     renderOptions: {
        //       map: map,
        //       autoViewport: true
        //     },
        //     onPolylinesSet: function (routes) {
        //       // let searchRoute = routes[0].getPolyline();//导航路线
        //       // map.removeOverlay(searchRoute);//移除查询出来 的路线
        //     },
        //     onMarkersSet: function (routes) {
        //       // map.removeOverlay(routes[0].marker); //删除起点
        //       // map.removeOverlay(routes[routes.length - 1].marker); //删除终点
        //     }
        //   });
        //   let _this = this;
        //   var start = new BMap.Point(path[i][0], path[i][1]);
        //   var end = new BMap.Point(path[i + 1][0], path[i + 1][1]);
        //   walking.search(start, end);
        //   walking.setSearchCompleteCallback(function () {
        //     var plan = walking.getResults().getPlan(0);
        //     for (let j = 0; j < plan.getNumRoutes(); j++) {
        //       var pts = plan.getRoute(j).getPath();
        //       var polyline = new BMap.Polyline(pts, { strokeColor: "#ff0000", strokeWeight: 2, strokeOpacity: 1 });//重新划路线
        //       map.addOverlay(polyline);
        //     }
        //   })
        // }

        map.addEventListener('click', function (e) { // 点击地点获取经纬度
          console.log(e.point.lng, e.point.lat)
        })
      },

      // 生成路线
      initPolyLine(arr) {
        this.polyLinePath = []
        
        for (var i = 0; i < arr.length; i++) {
          this.polyLinePath.push(new BMap.Point(arr[i].lng, arr[i].lat));
        }
      },

      // 获取时间
      getCurentTime() {
        let now = new Date();

        let year = now.getFullYear();       //年
        let month = now.getMonth() + 1;     //月
        let day = now.getDate();            //日

        let hh = now.getHours();            //时
        let mm = now.getMinutes();          //分
        let ss = now.getSeconds();           //秒

        let clock = year + "-";

        if (month < 10)
          clock += "0";

        clock += month + "-";

        if (day < 10)
          clock += "0";

        clock += day + " ";

        if (hh < 10)
          clock += "0";

        clock += hh + ":";
        if (mm < 10) clock += '0';
        clock += mm + ":";

        if (ss < 10) clock += '0';
        clock += ss;

        return (clock);
      },

      changeTime() {
        let path = [
          { lng: 119.741161, lat: 49.024210 },
          { lng: 119.740230, lat: 49.024068 },
          { lng: 119.739206, lat: 49.023761 },
          { lng: 119.740292, lat: 49.023435 },
          { lng: 119.739982, lat: 49.022313 },
          { lng: 119.737220, lat: 49.022741 },
          { lng: 119.739434, lat: 49.024189 },
          { lng: 119.739560, lat: 49.024521 },
          { lng: 119.732528, lat: 49.024880 },
          { lng: 119.733463, lat: 49.025253 },
          { lng: 119.732675, lat: 49.025903 },
          { lng: 119.733978, lat: 49.025799 },
          { lng: 119.731929, lat: 49.026435 },
          { lng: 119.734578, lat: 49.026760 },
          { lng: 119.737762, lat: 49.026428 },
          { lng: 119.738341, lat: 49.025357 },
          { lng: 119.739928, lat: 49.025716 },
          { lng: 119.741161, lat: 49.024210 },
        ];

        function shuffleArray(array) {
          // 创建数组副本，避免修改原数组
          const newArray = [...array];
          
          // 从数组末尾开始遍历
          for (let i = newArray.length - 1; i > 0; i--) {
            // 生成0到i之间的随机索引
            const j = Math.floor(Math.random() * (i + 1));
            
            // 交换当前元素与随机索引元素
            [newArray[i], newArray[j]] = [newArray[j], newArray[i]];
          }
          
          return newArray;
        }



        this.initPolyLine(shuffleArray(path))
      }
    }
  }
</script>

<style scoped>
  .map {
    width: 100%;
    height: 100%;
  }

  span {
    display: none;
  }

  .content {
    width: 100%;
    height: 100%;
  }
</style>